<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .grade-scroll {
        height: 300px;
        width: 690px;
        border: 1px solid #ccc;

        margin: 0 auto;
        position: relative;
        overflow: hidden;
      }

      .grade-scroll-wrap {
        height: 300px;
      }

      .grade-scroll-page {
        height: 300px;
        width: 690px;
        float: left;
      }

      .left-btn,
      .right-btn {
        background: #000;
        opacity: 0.3;
        height: 60px;
        width: 30px;
        text-align: center;
        line-height: 60px;
        color: #fff;

        position: absolute;
        top: 120px;

        cursor: pointer;
        user-select: none;
      }
      .left-btn:hover,
      .right-btn:hover {
        background: red;
      }

      .left-btn {
        border-radius: 0 5px 5px 0;
      }

      .right-btn {
        border-radius: 5px 0 0 5px;
        right: 0;
      }

      .grade-page-item {
        height: 150px;
        width: 345px;
        float: left;
        cursor: pointer;
        outline: 1px solid #f6f6f6;
      }

      .grade-page-item:hover {
        background: #f6f6f6;
        outline: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <div
      class="grade-scroll"
      data-scroll='[{"data":"<div>1</div><div>2</div>"},{"data":"1-2"},{"data":"1-3"},{"data":"1-4"},{"data":"2-1"},{"data":"2-2"},{"data":"2-3"},{"data":"2-4"},{"data":"3-1"},{"data":"3-2"},{"data":"3-3"}]'
      id="grade"
    />
  </body>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  <script>
    $.extend({
      scrollInit: function (id) {
        // 工具函数，根据每页数量，将数据分组
        function groupByNum(data, num) {
          var res = [];
          for (var i = 0; i < Math.floor(data.length / num) + 1; i++) {
            var tempArr = [];
            for (var j = 0; j < num; j++) {
              if (data[i * num + j]) {
                tempArr.push(data[i * 4 + j]);
              }
            }
            res.push(tempArr);
          }
          return res;
        }

        // 初始化数据
        var scrollData = groupByNum(
          JSON.parse($('#' + id).attr('data-scroll')),
          4
        );
        var step = $('#' + id).width();
        var pageNum = scrollData.length;

        // 生成 dom
        var htm = '';
        htm += '<div class="left-btn" id="scollLeftBtn">&lt;</div>';
        htm += '<div class="right-btn" id="scollRightBtn">&gt;</div>';
        htm +=
          '<div class="grade-scroll-wrap" style="width:' +
          step * pageNum +
          'px">';

        for (var i = 0; i < scrollData.length; i++) {
          htm += '<div class="grade-scroll-page">';
          for (var j = 0; j < scrollData[i].length; j++) {
            //  item htmlDom
            htm +=
              '<div class="grade-page-item">' +
              scrollData[i][j].data +
              '</div>';
          }
          htm += '</div>';
        }

        htm += '</div>';
        $('#' + id).append(htm);

        var leftBtn = $('#' + id).find('#scollLeftBtn');
        var rightBtn = $('#' + id).find('#scollRightBtn');
        var reduceTime = 1000;
        var lastTrigger = 0;

        // 上一页
        leftBtn.bind('click', function () {
          // 防抖策略
          let now = new Date().getTime();
          if (now - lastTrigger <= reduceTime) {
            console.log('您点击的太快了！');
            return false;
          } else {
            lastTrigger = now;

            // 正常逻辑
            let marginLeft = parseInt(
              $('#' + id + ' .grade-scroll-wrap').css('margin-left')
            );

            if (marginLeft < 0) {
              $('#' + id + ' .grade-scroll-wrap').animate(
                { 'margin-left': marginLeft + step + 'px' },
                reduceTime / 2
              );
            }
          }
        });
        // 下一页
        rightBtn.bind('click', function () {
          // 防抖策略
          let now = new Date().getTime();
          if (now - lastTrigger <= reduceTime) {
            console.log('您点击的太快了！');
            return false;
          } else {
            lastTrigger = now;

            // 正常逻辑
            let marginLeft = parseInt(
              $('#' + id + ' .grade-scroll-wrap').css('margin-left')
            );

            if (marginLeft > -step * (pageNum - 1)) {
              $('#' + id + ' .grade-scroll-wrap').animate(
                { 'margin-left': marginLeft - step + 'px' },
                reduceTime / 2
              );
            }
          }
        });
      },
    });
  </script>
  <script>
    $.scrollInit('grade');
    $(function () {
      // 执行初始化
    });
  </script>
</html>
